<template>
  <div class="app-container">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      height="35vh"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="杀伤链"
        width="100">
        <template slot-scope="scope">{{ "杀伤链-"+scope.row.id }}</template>
      </el-table-column>
      <el-table-column
        prop="spyEquipment"
        label="侦察装备"
        width="200">
      </el-table-column>
      <el-table-column
        prop="identificationEquipment"
        label="判断装备"
        width="200">
      </el-table-column>
      <el-table-column
        prop="decisionEquipment"
        label="决策装备"
        width="200">
      </el-table-column>
      <el-table-column
        prop="strikeEquipment"
        label="打击装备"
        width="200">
      </el-table-column>
      <el-table-column
        prop="time"
        label="时间"
        width="120">
      </el-table-column>
      <el-table-column
        prop="precision"
        label="精度(%)"
        width="120">
      </el-table-column>
      <el-table-column
        prop="accuracy"
        label="准度(%)"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <!-- Flex布局的容器 -->
    <div class="flex-container">
      <!-- 三个等宽的div -->
      <div class="flex-item" id="timeChain">Div 1</div>
      <div class="flex-item" id="precisionChain">Div 2</div>
      <div class="flex-item" id="accuracyChain">Div 3</div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
  name:"table",
  data() {
    return {
      echartsInstances: [], // 用于存储 ECharts 实例
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: [],
      timeChainOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        series: [
          {
            name: 't0',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: 't1',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [10, 1320, 101, 134, 90, 230, 210]
          },
          {
            name: 't2',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 't3',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
            name: 't4',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
          },
          {
            name: 't5',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      precisionChainOption:{
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: '#a90000'
                }
              },
              150,
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          }
        ]
      },
      accuracyChainOption:{
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: '#a90000'
                }
              },
              150,
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          }
        ]
      }
    }
  },

  methods: {
    getssl(){
      axios.get('http://localhost:8081/ssl/list')
        .then(response => {
          // Assuming the response contains an array of SSL data
          this.tableData = response.data.data.map(item => {
            // 使用replace方法去掉字符串两侧的方括号
            const modifiedItem = {
              ...item,
              spyEquipment: item.spyEquipment.replace(/^\[|\]$/g, ''),
              identificationEquipment: item.identificationEquipment.replace(/^\[|\]$/g, ''),
              decisionEquipment: item.decisionEquipment.replace(/^\[|\]$/g, ''),
              strikeEquipment: item.strikeEquipment.replace(/^\[|\]$/g, '')
            };

            return modifiedItem;
          });
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
    getChainInfo(){
      const idList=this.multipleSelection.map(item => item.id)
      axios.post('http://localhost:8081/ssl/chainInfo',idList)
        .then(response => {
          // 处理后端的响应
          console.log(response.data);
          this.timeChainOption.xAxis.data=this.multipleSelection.map(item => "杀伤链-"+item.id)
          this.precisionChainOption.xAxis.data=this.multipleSelection.map(item => "杀伤链-"+item.id)
          this.accuracyChainOption.xAxis.data=this.multipleSelection.map(item => "杀伤链-"+item.id)
          this.timeChainOption.series[0].data=response.data.data.t0
          this.timeChainOption.series[1].data=response.data.data.t1
          this.timeChainOption.series[2].data=response.data.data.t2
          this.timeChainOption.series[3].data=response.data.data.t3
          this.timeChainOption.series[4].data=response.data.data.t4
          this.timeChainOption.series[5].data=response.data.data.t5
          this.precisionChainOption.series[0].data=response.data.data.p
          this.accuracyChainOption.series[0].data=response.data.data.v
          this.drawLine()
        })
        .catch(error => {
          // 处理请求错误
          console.error(error);
        });
    },
    toggleSelection() {
      this.getChainInfo()
      // if (rows) {
      //   rows.forEach(row => {
      //     this.$refs.multipleTable.toggleRowSelection(row);
      //   });
      // } else {
      //   this.$refs.multipleTable.clearSelection();
      // }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    drawLine() {
      // 初始化echarts实例
      let timeChain = echarts.init(document.getElementById('timeChain'))
      let precisionChain = echarts.init(document.getElementById('precisionChain'))
      let accuracyChain = echarts.init(document.getElementById('accuracyChain'))
      this.echartsInstances = [timeChain, precisionChain, accuracyChain];
      // 绘制图表
      timeChain.setOption(this.timeChainOption);
      precisionChain.setOption(this.precisionChainOption)
      accuracyChain.setOption(this.accuracyChainOption)
    },
    reloadPage() {
      // 页面刷新
      this.echartsInstances.forEach(instance => {
        instance.resize();
      });
    }
  },
  mounted() {
    this.getssl();
    this.drawLine();
    window.addEventListener('resize', this.reloadPage);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.reloadPage);
  },
}
</script>

<style scoped>
.line{
  text-align: center;
}
.flex-container {
  margin-top: 20px; /* 设置顶部边距以区分三个div */
  display: flex;
  height: 60vh; /* 设置高度为视口高度的50% */
}

.flex-item {
  display: flex;
  flex: 1;
  border: 1px solid #ccc; /* 添加边框以示区分 */
  padding: 50px; /* 添加内边距以美化样式 */
  height: 100%;
}
</style>

